
import React, { Component } from "react";
import { connect } from "dva";
import {
    List,
    Tabs,
    WhiteSpace,
    NavBar,
    Icon,
    Card,
    TabBar,
    ListView,
    Button,
    DatePicker,
    Picker,
    WingBlank
} from "antd-mobile";
import { StickyContainer, Sticky } from "react-sticky";
import styles from "./EnvHistory.less";
import "antd-mobile/dist/antd-mobile.css";

import { getHistoryAlarm } from "../../../services/remove";
import moment from "moment";
import PublicService from "../../../services/PublicService";
import enUs from "antd-mobile/lib/date-picker/locale/en_US";



class EnvHistory extends Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2
        });

        this.state = {
            visible: false,
            pickerValue: [],
            date: null,
            dataSource,
            isLoading: true,
            echarts: [],
            data: [],
            rows:10,
            startdate:null,
            enddate:null,
            endDateStr:moment().format("YYYY-MM-DD HH:mm:ss"),
            typeCode:""
        };
    }

    onEndReached = event => {
 
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        this.setState({
            rows:this.state.rows+10
        })
        let data = {
            endDateStr:this.state.endDateStr,
            page:1,
            rows:this.state.rows,
            startDateStr:this.state.startDateStr,
            typeCode:this.state.typeCode
          }
          getHistoryAlarm({...data}).then(data => {
            console.log(data)
            this.setState({
                data:data.data.ret.items,
            })
            setTimeout(() => {
                this.setState({
                  dataSource: this.state.dataSource.cloneWithRows(data.data.ret.items),
                  isLoading: false,
                });
              }, 600);
        })
        this.setState({ isLoading: true });
        setTimeout(() => {
          
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.state.data),
                isLoading: false
            });
        }, 1000);
    };

   
    //页面进入事件
    componentDidMount () {
        let data = {
          endDateStr:moment().format("YYYY-MM-DD HH:mm:ss"),
          page:1,
          rows:10,
          startDateStr:"",
          typeCode:""
        }
        getHistoryAlarm({...data}).then(data => {
            console.log(data)
            this.setState({
                data:data.data.ret.items,
            })
            setTimeout(() => {
                this.setState({
                  dataSource: this.state.dataSource.cloneWithRows(data.data.ret.items),
                  isLoading: false,
                });
              }, 600);
        })
       
       
    }
    //选择器事件
    saveon = (v,value) => {
      
        this.setState({
            pickerValue:value,
            visible:false,
            typeCode:value[0],
            data:[]
        })

        setTimeout(() => {
            let data = {
                endDateStr:this.state.endDateStr,
                page:1,
                rows:this.state.rows,
                startDateStr:this.state.startDateStr,
                typeCode:v[0]
              }
              getHistoryAlarm({...data}).then(data => {
                console.log(data)
                this.setState({
                    data:data.data.ret.items,
                })
                setTimeout(() => {
               
                    this.setState({
                      dataSource: this.state.dataSource.cloneWithRows(data.data.ret.items),
                      isLoading: false,
                    });
                  }, 600);
              
            })

        })
    }
    //点击详情事件
    save = (id,time,name) => {
        console.log(id);
        PublicService.setCookie("takeTime",moment(time).format("YYYY-MM-DD HH:mm:ss"));
        PublicService.setCookie("cordName",name);
        PublicService.setCookie("ProdetailsId",id);
        this.props.history.push("/EnvDetails");
    };
    //时间选择事件
    onc = data => {
        console.log(data);
        this.setState({
            startdate: data,
            startDateStr:moment(data).format("YYYY-MM-DD HH:mm:ss")
        });
        if(this.state.endDateStr != null && this.state.startDateStr != null) {
            let data = {
                endDateStr:this.state.endDateStr,
                page:1,
                rows:this.state.rows,
                startDateStr:moment(data).format("YYYY-MM-DD HH:mm:ss"),
                typeCode:this.state.typeCode
              }
              getHistoryAlarm({...data}).then(data => {
                console.log(data)
                this.setState({
                    data:data.data.ret.items,
                })
                setTimeout(() => {
                    this.setState({
                      dataSource: this.state.dataSource.cloneWithRows(data.data.ret.items),
                      isLoading: false,
                    });
                  }, 600);
            })
        }
    };

    onc1 = date => {
        console.log(moment(date).format("YYYY-MM-DD HH:mm:ss"));
        this.setState({
            enddate: date,
            endDateStr:moment(date).format("YYYY-MM-DD HH:mm:ss")
        });

        if(this.state.endDateStr != null && this.state.startDateStr != null) {
            let data = {
                endDateStr:moment(date).format("YYYY-MM-DD HH:mm:ss"),
                page:1,
                rows:this.state.rows,
                startDateStr:this.state.startDateStr,
                typeCode:this.state.typeCode
              }
              getHistoryAlarm({...data}).then(data => {
                console.log(data)
                this.setState({
                    data:data.data.ret.items,
                })
                setTimeout(() => {
                    this.setState({
                      dataSource: this.state.dataSource.cloneWithRows(data.data.ret.items),
                      isLoading: false,
                    });
                  }, 600);
            })
        }
    };

    render() {
        const { data } = this.state;

        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    backgroundColor: "#F5F5F9",
                    height: 8,
                    borderTop: "1px solid #ECECED",
                    borderBottom: "1px solid #ECECED"
                }}
            />
        );
        let index = 0;
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = data.length - 1;
            }
            const obj = data[index++];
         
            return (
                <div key={rowID} style={{ borderBottom:"1px solid rgb(238, 230, 230)" ,padding:"5px 0px"}}>
                    <div
                        style={{
                         
                            color: "#888",
                            fontSize: 14,
                           
                        }}
                    >
                        {obj?obj.typeName:""}
                        {/* {"title"} */}
                    </div>
                    <div
                        style={{
                            display: "-webkit-box",
                            display: "flex",
                            padding: "5px 0",
                            borderRadius: "15px"
                        }}
                    >
                        <div
                            className={styles.list_left}
                            style={{ padding: "5 5" }}
                        >
                            <p className={styles.list_tp}>
                                {/* {obj.site} */}
                                {/* {"site"} */}
                                <span>
                                    {/* {obj.rank} */}
                                    {/* {"rank"} */}
                                </span>
                            </p>
                            <p className={styles.list_bp}>
                            {obj?moment(obj.createTime).format("YYYY-MM-DD HH:mm"):""}
                            </p>
                            <Button
                            type="ghost"
                                style={{
                                    height: 20,
                                    fontSize: 12,
                                    lineHeight: 1.5,
                                    width: 50,
                                    position: "absolute",
                                    right: 15,
                                    top: -8
                                }}
                                onClick={this.save.bind(this, obj?obj.id:9,obj?obj.createTime:null,obj?obj.typeName:"")}
                            >
                                详情
                            </Button>
                        </div>
                    </div>
                </div>
            );
        };
        const seasons= [[
            {
                value: "co",
                label: "一氧化碳"
            },
            {
                value: "pl",
                label: "颗粒物"
            }, {
                value: "nox",
                label: "氮氧化物"
            }, {
                value: "hcl",
                label: "氯化氢"
            }, {
                value: "waterTreatment",
                label: "水处理量"
            }, {
                value: "cod",
                label: "COD"
            }, {
                value: "ph",
                label: "pH值"
            }
        ]]
        return (
            <WingBlank>
            <WhiteSpace />
                <div className={styles.containerTop}>
                <WhiteSpace />
                <Picker
             
               visible={this.state.visible}
               data={seasons}
              
               cascade={false}
               value={this.state.pickerValue}
               onChange={this.saveon.bind(this,'pickerValue')}
               onOk={this.saveon.bind(this,'pickerValue')}
               onDismiss={() => this.setState({ visible: false })}
                >
                    <List.Item onClick={() => this.setState({ visible: true })}>
                        环保指标
                    </List.Item>
                </Picker>
                <WhiteSpace style={{borderBottom:"1px solid rgba(175, 186, 236, 0.43)",marginLeft:'15px',marginRight:'15px'}}/>
        <DatePicker
          value={this.state.startdate}
          title="请选择开始时间"
          onChange={this.onc}
        >
          <List.Item arrow="horizontal">开始时间</List.Item>
        </DatePicker>
        <WhiteSpace style={{borderBottom:"1px solid rgba(175, 186, 236, 0.43)",marginLeft:'15px',marginRight:'15px'}}/>
        <DatePicker
     
          title="请选择结束时间"
          extra="请选择"
          value={this.state.enddate}
          onChange={this.onc1}
        >
          <List.Item arrow="horizontal">结束时间</List.Item>
        </DatePicker>
        
        </div>
        <WhiteSpace />
          <div className={styles.containerBottom}>
          
          
            </div>
            <WhiteSpace />
                <div className={styles.boxBottom}>
                <ListView
        ref={el => this.lv = el}
        dataSource={this.state.dataSource}
        renderHeader={() => <span>报警设备/点位名称</span>}
        renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
          {this.state.isLoading ? 'Loading...' : 'Loaded'}
        </div>)}
        renderRow={row}
      
        className="am-list"
        pageSize={4}
        useBodyScroll
     
        scrollRenderAheadDistance={500}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={10}
      />
    </div>
          </WingBlank>
        );
    }
}
function mapStateToProps(state) {
    return {};
}
export default connect()(EnvHistory);
